// 主页面未登录自动退出
CheckLogin()
//主页面渲染用户名
renderUsername()
//主页面账号退出按钮
logout()
// const aShow = document.querySelector('#openModal')
async function renderStudent() {
    const res = await axios.get('/students')
    document.querySelector('.total').innerHTML = res.data.length
    document.querySelector('.list').innerHTML = res.data.map(item => {
        const { age, area, city, createdAt, gender, group, hope_salary, id, name, province, salary, updatedAt, user_id } = item
        return `
        <tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender ? '女' : '男'}</td>
            <td>${group}</td>
            <td>${hope_salary}</td>
            <td>${salary}</td>
            <td>${province + city + area}</td>
            <td>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id = ${id}></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id = ${id}></i></a>
            </td>
        </tr>
        `
    }).join('')
}
renderStudent()
//点击编辑删除事件委托
document.querySelector('.list').addEventListener('click', function (e) {
    if (e.target.classList.contains('bi-trash')) {
        delStudent(e.target.dataset.id)
    }
    if (e.target.classList.contains('bi-pen')) {
        modalEL.dataset.id = e.target.dataset.id
        editStudent(e.target.dataset.id)

    }
})

//学生页面删除函数
async function delStudent(id) {
    let con = confirm('确定要删除嘛？')
    if (con) {
        await axios.delete(`/students/${id}`)
        showToast('删除成功')
        renderStudent()
    }
}
//编辑功能函数
async function editStudent(id) {
    modal.show()
    document.querySelector('.modal-title').innerHTML = '修改学员'
    const res = await axios.get(`/students/${id}`)
    console.log(res)
    const arr = ['name', 'hope_salary', 'age', 'salary', 'group']
    arr.forEach(item => {
        document.querySelector(`[name= ${item}]`).value = res.data[item]
    })
    const { gender } = res.data
    const cks = document.querySelectorAll(`[name = gender]`)
    cks[gender].checked = true

    const { province, city, area } = res.data
    province1.value = province

    const res1 = await axios.get('/api/city', { params: { pname: province1.value } })
    city1.innerHTML = '<option value="">城市</option>' + res1.list.map(item => {
        return `<option>${item}</option>`
    })
    city1.value = city

    const res2 = await axios.get('/api/area', { params: { pname: province1.value, cname: city1.value } })
    area1.innerHTML = '<option value="">地区</option>' + res2.list.map(item => {
        return `<option>${item}</option>`
    })
    area1.value = area
}

//弹窗
const modalEL = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalEL)
//点击弹窗添加按钮
document.querySelector('#openModal').addEventListener('click', function () {
    modal.show()
    form.reset()
    document.querySelector('.modal-title').innerHTML = '添加学员'
    city1.innerHTML = '<option value="">城市</option>'
    area1.innerHTML = '<option value="">地区</option>'
})
//省市区三级联动
const province1 = document.querySelector('[name = province]')
const city1 = document.querySelector('[name = city]')
const area1 = document.querySelector('[name = area]')
async function pcaSelect() {
    const res1 = await axios.get('/api/province')
    province1.innerHTML = '<option value="">省份</option>' + res1.list.map(item => {
        return `<option>${item}</option>`
    }).join('')
    province1.addEventListener('change', async function () {
        const res2 = await axios.get('/api/city', { params: { pname: province1.value } })
        city1.innerHTML = '<option value="">城市</option>' + res2.list.map(item => {
            return `<option>${item}</option>`
        }).join('')
        area1.innerHTML = '<option value="">地区</option>'
    })
    city1.addEventListener('change', async function () {
        const res3 = await axios.get('/api/area', { params: { pname: province1.value, cname: city1.value } })
        area1.innerHTML = '<option value="">地区</option>' + res3.list.map(item => {
            return `<option>${item}</option>`
        }).join('')
    })
}
pcaSelect()
//弹窗的确认按钮
document.querySelector('#submit').addEventListener('click', function () {
    if (modalEL.dataset.id) {
        saveStudent()
    } else {
        addStudent()

    }
})
//编辑功能收集数据
async function saveStudent() {
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    const res = await axios.put(`/students/${modalEL.dataset.id}`, data)
    showToast(res.message)
    renderStudent()
    modal.hide()
    modal.dataset.id = ''
}
//添加功能收集数据
const form = document.querySelector('#form')
async function addStudent() {
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    const res = await axios.post('/students', data)
    showToast(res.message)
    renderStudent()
    modal.hide()
    form.reset()
}

